<template>
	<view class="vanishing-container" v-if="isShowPopup">
		<view class="full-mask-screen" @click.stop="hidePopup"></view>
		<view class="vanishing-popup">
			<view class="vanishing_header">
				<image class="icon-img" src="https://mini-program-1251317796.file.myqcloud.com/menu/select-address-icon_20200522.png"></image>
				<view class="tips-txt">
					<text>由于菜品变更，以下菜品已经不在了~</text>
				</view>
			</view>
			<view class="vanishing_content scroll-y">
				<template v-for="(item, index) in list">
					<goods-list :key="index + item.id" :product="item"></goods-list>
				</template>
			</view>
			<view class="vanishing_bottom">
				<button class="l-btn btn-primary sure-btn" @click.stop="hidePopup">确 认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '../goods-list/goods-list.vue';
	export default {
		name: 'Vanishing',
		components: {
			goodsList
		},
		data() {
			return {
				isShowPopup: false,
				list: []
			};
		},
		computed: {
			// 购物车中不存在的产品id列表
			noExistProducts() {
				return this.$store.state.noExistProducts;
			}
		},
		watch: {
			noExistProducts(list) {
				if (list.length) {
					this.list = list;
					this.isShowPopup = true;
				} else {
					this.isShowPopup = false;
				}
			}
		},
		mounted() {
			if (this.noExistProducts.length) {
				this.list = this.noExistProducts;
				this.isShowPopup = true;
			} else {
				this.isShowPopup = false;
			}
		},
		methods: {
			// 隐藏弹窗事件
			hidePopup() {
				this.$store.commit('handleNoExistProducts', []);
				this.isShowPopup = false;
			}
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/styles/common.less';
	@import './vanishing.less';
</style>
